<template>
  <view class="product-list-detail" v-if="visible">
    <!-- 套餐包标题 -->
    <view class="package-title">
      <!-- <view class="package-icon">●</view> -->
      <text class="package-text">{{ packageTitle }}</text>
    </view>

    <!-- 物料系列组件 -->
    <material-series
      v-if="filteredMainList && filteredMainList.length > 0"
      title="物料系列-主产品"
      :list="filteredMainList"
      :base-url="baseUrl"
      :show-checkbox="false"
      @product-click="onProductClick"
      @quantity-change="onQuantityChange"
      @item-select="onItemSelect"
    />

    <material-series
      v-if="filteredCzpList && filteredCzpList.length > 0"
      title="物料系列-次主品"
      :list="filteredCzpList"
      :base-url="baseUrl"
      :show-checkbox="false"
      @product-click="onProductClick"
      @quantity-change="onQuantityChange"
      @item-select="onItemSelect"
    />

    <material-series
      v-if="filteredFpList && filteredFpList.length > 0"
      title="物料系列-辅品"
      :list="filteredFpList"
      :base-url="baseUrl"
      :show-checkbox="false"
      @product-click="onProductClick"
      @quantity-change="onQuantityChange"
      @item-select="onItemSelect"
    />

    <material-series
      v-if="filteredWlList && filteredWlList.length > 0"
      title="物料系列-物料"
      :list="filteredWlList"
      :base-url="baseUrl"
      :show-checkbox="false"
      @product-click="onProductClick"
      @quantity-change="onQuantityChange"
      @item-select="onItemSelect"
    />
  </view>
</template>

<script>
import MaterialSeries from '@/components/material-series/material-series.vue';

export default {
  name: 'ProductListDetail',
  components: {
    MaterialSeries
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    packageData: {
      type: Object,
      default: () => ({})
    },
    baseUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      wlList: [],
      mainList: [],
      fpList: [],
      czpList: [],
      packageTitle: '套餐包'
    }
  },
  computed: {
    // 过滤出 falgCHeck 为 1 的数据
    filteredWlList() {
      return this.wlList.filter(item => item.falgCHeck == '1');
    },
    filteredMainList() {
      return this.mainList.filter(item => item.falgCHeck == '1');
    },
    filteredFpList() {
      return this.fpList.filter(item => item.falgCHeck == '1');
    },
    filteredCzpList() {
      return this.czpList.filter(item => item.falgCHeck == '1');
    }
  },
  watch: {
    packageData: {
      handler(newData) {
        if (newData && Object.keys(newData).length > 0) {
          this.loadPackageData(newData);
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    loadPackageData(data) {
      this.wlList = data.wlList || [];
      this.mainList = data.mainList || [];
      this.fpList = data.fpList || [];
      this.czpList = data.czpList || [];
      this.packageTitle = data.title || '套餐包';
      
      console.log('组件接收到的数据:', data);
      console.log('过滤后的数据:', {
        wlList: this.filteredWlList,
        mainList: this.filteredMainList,
        fpList: this.filteredFpList,
        czpList: this.filteredCzpList
      });
    },
    onProductClick(item) {
      console.log('产品点击:', item);
      this.$emit('product-click', item);
    },
    onQuantityChange(data) {
      console.log('数量变化:', data);
      this.$emit('quantity-change', data);
    },
    onItemSelect(data) {
      console.log('选择状态变化:', data);
      this.$emit('item-select', data);
    }
  }
}
</script>

<style lang="scss" scoped>
.product-list-detail {
  background-color: #f5f5f5;
  // padding: 20rpx;
  // margin-top: 20rpx;
}

.package-title {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30rpx;
  // margin-bottom: 20rpx;
  border-radius: 10rpx;

  .package-icon {
    color: #ff6600;
    font-size: 24rpx;
    margin-right: 15rpx;
  }

  .package-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}
</style>
